<template>
  <f7-page class="notice-body4">
    <!-- 头部导航栏 -->

      <qm-currentcy-navbar title="消息">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <!-- 聊天信息 -->
    <f7-row class="qm-row" v-for="(item, index) in list" :key="index">
      <f7-col width="15" class="col-header"
        ><img
          :src="item.img"
          alt=""
          onerror="javascript:this.src='static/img/center/man-png.png'"
      /></f7-col>
      <f7-col width="65" class="col-body">
        <f7-row>
          <f7-col width="100" medium="50" class="col2-title">{{
            item.title
          }}</f7-col>
          <f7-col width="100" medium="50" class="col2-news">{{
            item.news
          }}</f7-col>
        </f7-row>
      </f7-col>
      <f7-col width="20" class="col-footer">{{ item.time }}</f7-col>
    </f7-row>
    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          img: "static/img/notice/index4/icon-xiaoxi-tongzhi.svg",
          title: "系统通知",
          news: "审批流程新功能上线啦！",
          time: "09-26",
        },
        {
          img: "",
          title: "李娜",
          news: "10点3号会议室记得开会哦~",
          time: "09:32",
        },
        {
          img: "static/img/notice/index4/icon-xiaoxi-tixing.svg",
          title: "工作提醒",
          news: "[考勤打卡] 今日打卡成功！",
          time: "09:12",
        },
        {
          img: "static/img/notice/index4/icon-xiaoxi-zhusho.svg",
          title: "文件传输助手",
          news: "[图片]",
          time: "08:50",
        },
        {
          img: "",
          title: "钟婷",
          news: "这个方案不错，部分细节可以再优化优化优化优化",
          time: "09-20",
        },
        {
          img: "static/img/notice/index4/icon-xiaoxi-yojian.svg",
          title: "邮件组手",
          news: "你有8封新的邮件未读",
          time: "09-19",
        },
        {
          img: "",
          title: "小赵",
          news: "我在办公室",
          time: "09-26",
        },
        {
          img: "",
          title: "小王",
          news: "我通过了您的好友请求，以后多多交流啊啊啊啊啊！",
          time: "09-26",
        },
        {
          img: "",
          title: "小孙",
          news: "好的，我明天安排一下",
          time: "09-26",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.notice-body4 {
  // 表头
  background-color: var(--color-fill-grey-inverse);
    .navbar-inner {
      background-color: var(--color-fill-grey-inverse);

      .f7-row {
        width: 100%;
        margin: 0;
        padding: 0;
        padding-top: calc(27px * var(--ratio));
        padding-bottom: calc(20px * var(--ratio));
        --f7-grid-gap: 40px;

        .f7-col-title {
          font-size: calc(34px * var(--ratio));
          text-align: center;
          font-weight: 400;
          color: #000000d0;
        }

        .f7-icons {
          font-size: calc(40px * var(--ratio));
          color: #000000e6;
          .f7-link{
            height: auto;
          }
          .f7-link::before{
            display: none;
          }
        }
      }
    }

    .navbar-bg {
      background-color: #F5F6FA;
    }

    .navbar-bg::after {
      display: none;
    }

    .navbar-bg::before {
      display: none;
    }


  // 聊天信息
  .qm-row {
    padding: calc(24px * var(--ratio)) 0px calc(24px * var(--ratio))calc(32px * var(--ratio));

    img {
      width: calc(96px * var(--ratio));
      height: calc(96px * var(--ratio));
    }

    .col-body {
      margin-left: 10px;
      .col2-title {
        color: #0F1826;
        font-size: calc(32px * var(--ratio));
        margin-bottom: 4px;
      }

      .col2-news {
        color: var(--color-text-subtext);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: calc(28px * var(--ratio));
      }
    }

    .col-footer {
      color: var(--color-text-subtext);
      text-align: center;
      font-size: calc(24px * var(--ratio));
    }
  }

  // 底部
  .toolbar-bottom:after {
    display: none;
  }
}

</style>
